<template>
	<view class="freePurchase">
		<NavBar leftIcon="/static/img/index/119.png">

		</NavBar>
		<text class="topText">促销联盟，销量不愁</text>
		<view class="introduce">
			<text>活动介绍</text>
			<view style="height: 600rpx;overflow: auto;" class="" v-html="data.content">

			</view>
			<!-- <rich-text style="height: 200rpx;" :nodes="data.content"></rich-text> -->
			<!-- 	<view class="introduceView">
				<text>1</text>
				<text>促销联盟活动介绍</text>
			</view>
			<view class="textView">
				1.所有符合报名规则的商家均可参与

			</view>
			<view class="textView">
				2.活动长期有效

			</view>
			<view class="textView">
				3.平台扶持，流量加成，参加活动的商品/服务，消费者可以赢取免单，（商家实际收益为商家定价的80％-100％，含平台手续费）
			</view>
			<view class="textView">
				4.报名成功后获得免单购专属标识
			</view> -->
		</view>
		<view class="btn" @tap="signUp">
			立即报名
		</view>
		<view class="check" @tap="navTo('/pages/eventRegistrationNotice/index')">
			<image @tap.stop="data.bool = !data.bool"
				:src="data.bool?'/static/img/index/49.png':'/static/img/index/195.png'" mode="widthFix"></image>
			<text>阅读宜趣多资免单购活动报名须知</text>
		</view>
		<u-popup z-index="1" round="20" mode="bottom" :show="data.show" @close="()=>{data.show = false}">
			<view class="popupTop">
				<view :class="data.num == 0?'active':''" @tap="data.num = 0">
					活动规则详情
				</view>
				<view :class="data.num == 1?'active':''" @tap="data.num = 1">
					活动店铺要求
				</view>
			</view>
			<RuleRequirements :content="data.content1" v-if="data.num == 0" />
			<StoreRequirements :storeInfo="data.storeInfo" v-else />
			<view class="popupBot">
				<text @tap="handeClick1">立即参与</text>
			</view>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import NavBar from '@/components/navBar.vue'
	import { queryFreeBuyActivity, storeQualification, storeJoinActivity } from '@/utils/api/freeShipping'
	import { reactive } from 'vue'
	import RuleRequirements from './components/ruleRequirements.vue'
	import StoreRequirements from './components/storeRequirements.vue'
	const data = reactive({
		bool: false,
		content: '', 
		show: false,
		num: 0,
		content1: '',
		storeInfo: { finalResult: false }
	})
	storeQualification().then((res) => {
		data.storeInfo = res.data;
	})
	const handeClick1 = () => {
		if (!data.storeInfo.finalResult) {
			uni.showToast({
				title: '当前资质不满足!',
				icon: 'none'
			})
			return
		}
		storeJoinActivity()
		navTo('/pages/newCustomerReduction/index')
	}
	console.log('执行')
	queryFreeBuyActivity().then((res) => {
		console.log( res.data)
		res.data.ruleDesc = res.data.ruleDesc.replace(/<img/g, '<img style=width:100%')
		data.content = res.data.buyerDesc;
		data.content1 = res.data.ruleDesc;
	})
	const signUp = () => {
		if (!data.bool) {
			uni.showToast({
				title: '请阅读报名须知!',
				icon: 'none'
			})
			return;
		}
		data.show = true;
	}
	const navTo = (url) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss">
	.popupBot {
		padding: 10rpx 56rpx 30rpx 56rpx;
		border-top: 2rpx solid #F4F6FA;

		text {
			display: inline-block;
			width: 100%;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			border-radius: 88rpx;
			background: #FF263F;
		}
	}

	.popupTop {
		justify-content: center;
		display: flex;
		padding: 32rpx 0 16rpx 0;
		border-bottom: 2rpx solid #F4F6FA;

		view {
			color: #595959;
			font-size: 32rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			&::after {
				margin-top: 6rpx;
				content: '';
				display: inline-block;
				width: 64rpx;
				height: 8rpx;
				border-radius: 8rpx;

			}
		}

		>view:nth-of-type(1) {
			margin-right: 20rpx;
		}

		.active {
			color: #212121;

			&::after {
				background: #FF263F;
			}
		}
	}

	:deep(.navBarTop) {
		background: transparent !important;
	}

	.freePurchase {
		height: 100vh;
		background: url('/static/img/freeShipping/5.png') no-repeat;
		background-size: 100% 130%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.btn {
			width: 400rpx;
			text-align: center;
			line-height: 96rpx;
			background: url('/static/img/freeShipping/4.png') no-repeat;
			background-size: 100% 100%;
			font-size: 42rpx;
			color: #fff;
			font-weight: bold;
			margin: 65rpx 0 40rpx 0;
		}

		.check {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				margin-right: 12rpx;
			}

			text {
				font-size: 28rpx;
				color: #fff;
			}
		}

		.topText {
			font-size: 72rpx;
			color: #fff;
			font-family: 'MyFont1';
			margin: 60rpx 0 30rpx 0;
		}

		.introduce {
			border-radius: 32rpx;
			background: linear-gradient(180deg, rgba(255, 238, 241, 0.95) 0%, #FFFFFF 100%);
			padding: 48rpx;
			width: 680rpx;

			>text {
				font-size: 56rpx;
				font-family: 'MyFont1';
				background: linear-gradient(to right, #E94134, #680002);
				-webkit-background-clip: text;
				color: transparent;
			}

			.introduceView {
				display: flex;
				align-items: center;
				margin: 30rpx 0;

				>text:nth-of-type(1) {
					-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
					clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
					width: 40rpx;
					height: 40rpx;
					background: #FE0A22;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: 'MyFont1';
					color: #fff;
					margin-right: 10rpx;
					font-size: 24rpx;
				}

				>text:nth-of-type(2) {
					font-weight: bold;
					background: linear-gradient(to right, #E94134, #680002);
					-webkit-background-clip: text;
					font-size: 36rpx;
					color: transparent;
				}
			}

			.textView {
				margin-top: 10rpx;
				color: #965657;
				font-size: 30rpx;
			}
		}
	}
</style>